<!DOCTYPE html>
<html>
<!--第一个VUE实例-->

<head>
    <meta charset="UTF-8">
    <title>Hello Word</title>
</head>

<body>
    <div id='app'>
        <!--简单文本插值-->
        <p>{{message}}</p>
        <!-- JavaScript表达式-->
        <p>{{toUpperCase1}}</p>
        <!--简单文本插值-->
        <p>{{spanHTML}}</p>
        <!--输出HTML-->
        <p v-html="spanHTML"></p>
        <!--绑定数据-->
        <a v-bind:href="url">Vue.js</a>
    </div>
    <!--注意网络能访问-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const app = {
            data() {
                return {
                    message: 'Hello Vue.js',
                    url: 'https://v3.cn.vuejs.org/',
                    spanHTML: '<span style="color: red">这是一段红色的文字</span>'
                };
            },
            computed: {
            toUpperCase1() {
                if(!this.message) {
                    return '';
                }
          return this.message.toUpperCase();
        }
      }

        };
        const vm = Vue.createApp(app).mount('#app');
    </script>
</body>

</html>